<template>
  <van-tabs v-model="activeName" sticky offset-top="46" animated swipeable>
    <van-tab v-for="item in tabMapOptions" :key="item.type" :name="item.type" :title="item.title">
      <keep-alive>
        <house-list v-if="activeName == item.type" class="tab-pane" :type="item.type" />
      </keep-alive>
    </van-tab>
  </van-tabs>
</template>

<script>
import { Tab, Tabs } from 'vant'
import HouseList from '@/components/House/index'
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    HouseList
  },
  data() {
    return {
      // tabs标签页数据
      tabMapOptions: [
        {
          title: '推荐',
          type: '1'
        },
        {
          title: '新房',
          type: '2'
        },
        {
          title: '二手房',
          type: '3'
        },
        {
          title: '商用房',
          type: '4'
        },
        {
          title: '装修',
          type: '5'
        }
      ],
      activeName: '1'
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .van-tab--active {
  font-size: @font-size-18;
}
/deep/ .van-tab__pane {
  min-height: calc(100vh - @nav-bar-height - @tabbar-height - @tabs-line-height);
}
</style>
